<script setup lang="ts">
import { reactive, ref } from 'vue'
import { type TabsPaneContext, Action, ElMessageBox } from 'element-plus'
import useSetting from '@renderer/composables/useSetting'
import NavBar from '@renderer/components/navBar.vue'
import { useRouter } from 'vue-router'
import helper from '@renderer/utils/helper'
const route = useRouter()
const { checkRule } = helper()
const tabList = reactive([
  {
    name: '预算核算方式',
  },
  {
    name: '预算损耗系数',
  },
  {
    name: '预算材料规格',
  },
])
let adjustInfo = reactive({})
const adjustList = reactive([
  {
    name: '预算模版',
    showName: '',
    key: 'budget_type_id',
    type: 0,
  },
  {
    name: '水电改造',
    showName: '',
    key: 'shui_dian_nuan_id',
    type: 0,
  },
  {
    name: '防水立管',
    showName: '',
    key: 'water_pipe_id',
    type: 0,
  },
  {
    name: '瓦工',
    showName: '',
    key: 'bricklayer_id',
    type: 0,
  },
  {
    name: '木工',
    showName: '',
    key: 'carpentry_id',
    type: 0,
  },
  {
    name: '木地板',
    showName: '',
    key: 'wood_floor_id',
    type: 0,
  },
  {
    name: '墙漆',
    showName: '',
    key: 'wall_paint_id',
    type: 0,
  },
  {
    name: '美缝',
    showName: '',
    key: 'beauty_sewing_id',
    type: 0,
  },
  {
    name: '墙漆面积含窗口面积',
    key: 'wall_paint_contain_window',
    type: 1,
  },
  {
    name: '墙漆面积含门口面积',
    key: 'wall_paint_contain_door',
    type: 1,
  },
  {
    name: '墙漆面积含柜子投影面积',
    key: 'wall_paint_contain_cabinet_shadow',
    type: 1,
  },
  {
    name: '地暖面积含柜子遮盖面积',
    key: 'ground_contain_cabinet_cover',
    type: 1,
  },
  {
    name: '踢脚线米数不含柜子门口',
    key: 'skirting_line_no_contain_door',
    type: 1,
  },
  {
    name: '合计为0是否显示',
    key: 'show_zero',
    type: 1,
  },
])
const selectTemplateDialog = ref(false)
const selectTemplateKey = ref<string>()
const selectTemplateName = ref<string>()
const handleTemplate = async (item: any) => {
  await getCalculateTemplate({ cate: item.name })
  selectTemplateKey.value = item.key
  selectTemplateName.value = item.showName
  selectTemplateDialog.value = true
}
const handleClose = () => {
  selectTemplateDialog.value = false
}
const handleSelectTemplate = (id: number, name: string) => {
  adjustInfo[selectTemplateKey.value!] = id
  const findIndex = adjustList.findIndex((item) => item.key == selectTemplateKey.value)
  if (findIndex != -1) {
    adjustList[findIndex].showName = name
  }
}
const initPage = async () => {
  await getCalculateRecord({
    calculate_id: route.currentRoute.value.query.calculate_id as string,
  })
  adjustList.map((item) => {
    if (item.type == 0) {
      item.showName = functionInfo.value![item.key.replace('_id', '') + '_name']
    } else if (item.type == 1) {
      adjustInfo[item.key] = functionInfo.value![item.key]
    }
  })
  let deleteKey = [
    'id',
    'wood_floor',
    'wood_floor_name',
    'water_pipe_name',
    'water_pipe',
    'wall_paint_name',
    'wall_paint',
    'shui_dian_nuan_name',
    'shui_dian_nuan',
    'company_id',
    'carpentry',
    'carpentry_name',
    'budget_type',
    'budget_type_name',
    'bricklayer',
    'bricklayer_name',
    'beauty_sewing',
    'beauty_sewing_name',
  ]
  deleteKey.map((item) => {
    delete functionInfo.value![item]
  })
  adjustInfo = functionInfo.value!
}
const handleCalculateSave = async () => {
  ElMessageBox.alert('本次修改数据，仅对本“模板/预算”生效。', '温馨提示', {
    showCancelButton: true,
    callback: async (action: Action) => {
      if (action == 'confirm') {
        let data = Object.assign({}, adjustInfo, {
          calculate_id: route.currentRoute.value.query.calculate_id as string,
        })
        await setCalculateRecord(data)
      }
    },
  })
}

//损耗系数
const lossList = reactive([
  {
    title: '基础项目',
    checkInfo: [
      {
        name: '套内面积计算系数',
        key: 'tnmj_loss',
      },
       {
        name: '墙漆面积计算系数',
        key: 'qqmj_loss',
      },
      {
        name: '地暖面积计算系数',
        key: 'dnmj_loss',
      },
      {
        name: '电路按米计算系数',
        key: 'dlmi_loss',
      },
      {
        name: '水路按米计算系数',
        key: 'slmi_loss',
      },
      {
        name: '铝扣板面积计算系数',
        key: 'buckle_plate_loss',
      },
    ],
  },
  {
    title: '水电暖材料',
    checkInfo: [
      {
        name: '1.5平方电线损耗系数',
        key: 'one_square',
      },
      {
        name: '2.5平方电线损耗系数',
        key: 'two_square',
      },
      {
        name: '4平方电线损耗系数',
        key: 'three_square',
      },
      {
        name: '红色线管损耗系数',
        key: 'red_pipe_loss',
      },
      {
        name: '蓝色线管损耗系数',
        key: 'blue_pipe_loss',
      },
      {
        name: '红色线管直接损耗系数',
        key: 'red_pipe_in_loss',
      },
      {
        name: '蓝色线管直接损耗系数',
        key: 'blue_pipe_in_loss',
      },
      {
        name: '锁母损耗系数',
        key: 'suomu_loss',
      },
      {
        name: '线盒损耗系数',
        key: 'xianhe_loss',
      },
      {
        name: '八角盒损耗系数',
        key: 'bajiaohe_loss',
      },
      {
        name: '波纹管损耗系数',
        key: 'bowenguan_loss',
      },
      {
        name: '水管损耗系数',
        key: 'water_pipe_loss',
      },
      {
        name: '三通损耗系数',
        key: 'santong_loss',
      },
      {
        name: '直接损耗系数',
        key: 'zhijie_loss',
      },
      {
        name: '过桥损耗系数',
        key: 'guoqiao_loss',
      },
      {
        name: '弯头损耗系数',
        key: 'wantou_loss',
      },
      {
        name: '堵头损耗系数',
        key: 'dutou_loss',
      },
      {
        name: '管卡（吊卡）损耗系数',
        key: 'guanka_loss',
      },
      {
        name: '水路保温管损耗系数',
        key: 'waterway_loss',
      },
    ],
  },
  {
    title: '瓦工材料',
    checkInfo: [
      {
        name: '墙砖损耗系数',
        key: 'wall_loss',
      },
      {
        name: '地砖损耗系数',
        key: 'floor_loss',
      },
      {
        name: '卫生间地砖损耗系数',
        key: 'mini_floor_loss',
      },
      {
        name: '踢脚线损耗系数',
        key: 'skirting_line_loss',
      },
      {
        name: '沙子损耗系数',
        key: 'sand_loss',
      },
      {
        name: '水泥损耗系数',
        key: 'cement_loss',
      },
      {
        name: '背胶损耗系数',
        key: 'adhesive_loss',
      },
    ],
  },
  {
    title: '木工材料',
    checkInfo: [
      {
        name: '石膏板损耗系数',
        key: 'gypsum_board_loss',
      },
      {
        name: '欧松板损耗系数',
        key: 'osb_board_loss',
      },
      {
        name: '木方损耗系数',
        key: 'batten_loss',
      },
      {
        name: '主龙骨损耗系数',
        key: 'main_keel_loss',
      },
      {
        name: '副龙骨损耗系数',
        key: 'second_keel_loss',
      },
      {
        name: '边龙骨损耗系数',
        key: 'line_keel_loss',
      },
      {
        name: '吊丝损耗系数',
        key: 'hang_spring_loss',
      },
      {
        name: '胀头胀管损耗系数',
        key: 'zhangtou_loss',
      },
      {
        name: '膨胀丝损耗系数',
        key: 'pengzhangsi_loss',
      },
      {
        name: '38钢排损耗系数',
        key: 'gangpai38_loss',
      },
      {
        name: '32钢排损耗系数',
        key: 'gangpai32_loss',
      },
      {
        name: '25钢排损耗系数',
        key: 'gangpai25_loss',
      },
      {
        name: '2.5自攻丝损耗系数',
        key: 'zigongsi_loss',
      },
      {
        name: '30直钉损耗系数',
        key: 'zhiding30_loss',
      },
      {
        name: '25直钉损耗系数',
        key: 'zhiding25_loss',
      },
      {
        name: '白乳胶损耗系数',
        key: 'bairujiao_loss',
      },
      {
        name: '木工发泡胶损耗系数',
        key: 'mgfpj_loss',
      },
    ],
  },
  {
    title: '墙漆材料',
    checkInfo: [
      {
        name: '面漆损耗系数',
        key: 'finish_loss',
      },
      {
        name: '腻子粉损耗系数',
        key: 'putty_powder_loss',
      },
      {
        name: '嵌缝石膏粉损耗系数',
        key: 'caulking_gypsum_loss',
      },
      {
        name: '找平石膏粉损耗系数',
        key: 'painting_gypsum_loss',
      },
      {
        name: '阴角损耗系数',
        key: 'inside_corner_loss',
      },
      {
        name: '阳角损耗系数',
        key: 'outer_corner_loss',
      },
      {
        name: '1.1保护膜损耗系数',
        key: 'mo11_loss',
      },
      {
        name: '2.4保护膜损耗系数',
        key: 'mo24_loss',
      },
      {
        name: '接缝带损耗系数',
        key: 'jiefengdai_loss',
      },
    ],
  },
  {
    title: '木地板材料',
    checkInfo: [
      {
        name: '木地板损耗系数',
        key: 'wood_floor_loss',
      },
      {
        name: '防潮膜损耗系数',
        key: 'fangchaomo_loss',
      },
      {
        name: '扣条损耗系数',
        key: 'koutiao_loss',
      },
    ],
  },
  {
    title: '其他材料',
    checkInfo: [
      {
        name: '石膏线损耗系数',
        key: 'gypsum_line_loss',
      },
      {
        name: '装门发泡胶损耗系数',
        key: 'zmfpj_loss',
      },
      {
        name: '瓷砖背景结构胶损耗系数',
        key: 'jiegoujiao_loss',
      },
      {
        name: '瓷砖背景云石胶损耗系数',
        key: 'yunshijiao_loss',
      },
    ],
  },
])
const handleLossSave = async () => {
  ElMessageBox.alert('本次修改数据，仅对本“模板/预算”生效。', '温馨提示', {
    showCancelButton: true,
    callback: async (action: Action) => {
      if (action == 'confirm') {
        let data = Object.assign({}, lossInfo.value, {
          calculate_id: route.currentRoute.value.query.calculate_id as string,
        })
        await setLossRateRecord(data)
      }
    },
  })
}
const specList = reactive([
  {
    name: '石膏板规格',
    key: 'gypsum_board',
    unit: '米/长',
  },
  {
    name: '主龙骨规格',
    key: 'main_keel',
    unit: '米/根',
  },
  {
    name: '副龙骨规格',
    key: 'second_keel',
    unit: '米/根',
  },
  {
    name: '边龙骨规格',
    key: 'line_keel',
    unit: '米/根',
  },
  {
    name: '吊丝规格',
    key: 'hang_spring',
    unit: '米/根',
  },
  {
    name: '木方根规格',
    key: 'wood_square_root',
    unit: '米/根',
  },
  {
    name: '木方捆规格',
    key: 'wood_square_tie',
    unit: '根/捆',
  },
  {
    name: '乳胶漆面漆规格',
    key: 'latex',
    unit: 'L',
  },
  {
    name: '线管规格',
    key: 'conduit',
    unit: '米/根',
  },
  {
    name: '水管规格',
    key: 'water_pipe',
    unit: '米/根',
  },
  {
    name: '水路保温管',
    key: 'waterway',
    unit: '米/根',
  },
  {
    name: '木地板规格',
    key: 'wood_floor',
    unit: '平方/块',
  },
])
const handleMaterialSave = async () => {
  ElMessageBox.alert('本次修改数据，仅对本“模板/预算”生效。', '温馨提示', {
    showCancelButton: true,
    callback: async (action: Action) => {
      if (action == 'confirm') {
        let data = Object.assign({}, materialInfo.value, {
          calculate_id: route.currentRoute.value.query.calculate_id as string,
        })
        await setMaterialRecord(data)
      }
    },
  })
}
const activeName = ref('')
const handleClick = async (tab: TabsPaneContext, _event: Event) => {
  const tabInfo = tabList.find((item) => item.name === tab.props.name)
  if (tabInfo?.name == '预算核算方式') {
    await initPage()
  } else if (tabInfo?.name == '预算损耗系数') {
    await getLossRateRecord({ calculate_id: route.currentRoute.value.query.calculate_id as string })
  } else if (tabInfo?.name == '预算材料规格') {
    await getMaterialRecord({ calculate_id: route.currentRoute.value.query.calculate_id as string })
  }
}
const checkUserRule = async () => {
  if (checkRule('核算方式修改权')) {
    activeName.value = '预算核算方式'
    await initPage()
  } else if (checkRule('损耗系数修改权')) {
    activeName.value = '预算损耗系数'
    await getLossRateRecord({ calculate_id: route.currentRoute.value.query.calculate_id as string })
  } else if (checkRule('材料规格修改权')) {
    activeName.value = '预算材料规格'
    await getMaterialRecord({ calculate_id: route.currentRoute.value.query.calculate_id as string })
  }
}
const {
  getCalculateTemplate,
  templateList,
  getCalculateRecord,
  setCalculateRecord,
  functionInfo,
  setLossRateRecord,
  getLossRateRecord,
  lossInfo,
  getMaterialRecord,
  materialInfo,
  setMaterialRecord,
} = useSetting()
await checkUserRule()
</script>
<template>
  <main class="bg-white flex flex-col py-4 px-3 nodrag" style="height: -webkit-fill-available">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="预算核算方式" name="预算核算方式" v-if="checkRule('核算方式修改权')">
        <el-form label-width="auto">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in adjustList" :key="index" :span="12">
              <el-form-item :label="item.name + ':'">
                <el-input
                  v-model="item.showName"
                  placeholder="请选择"
                  readonly
                  v-if="item.type == 0"
                  @click="handleTemplate(item)" />
                <el-radio-group v-model="adjustInfo[item.key]" placement="row" v-else>
                  <el-radio label="是" :value="1" :customStyle="{ marginRight: '35px' }" />
                  <el-radio label="否" :value="0" />
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="flex justify-center" @click="handleCalculateSave">
          <button class="save-button">保存设置</button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预算损耗系数" name="预算损耗系数" lazy v-if="checkRule('损耗系数修改权')">
        <el-form label-width="auto" v-if="lossInfo">
          <div class="overflow-y-auto flex flex-col overflow-x-hidden">
            <div class="flex flex-col gap-3" v-for="(item, index) in lossList" :key="index">
              <text class="text-xl text-black font-bold">{{ item.title }}</text>
              <el-row :gutter="10">
                <el-col v-for="(checkItem, checkIndex) in item.checkInfo" :key="checkIndex" :span="8">
                  <el-form-item :label="checkItem.name + ':'">
                    <el-input v-model="lossInfo[checkItem.key]" type="number" @mousewheel.native.prevent placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
        <div class="flex justify-center pb-5">
          <button class="save-button" @click="handleLossSave">保存设置</button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预算材料规格" name="预算材料规格" lazy v-if="checkRule('材料规格修改权')">
        <el-form :model="materialInfo" label-width="auto" v-if="materialInfo">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in specList" :key="index" :span="12">
              <el-form-item :label="item.name + ':'">
                <el-input v-model="materialInfo[item.key]" type="number" @mousewheel.native.prevent placeholder="请输入">
                  <template #append>{{ item.unit }}</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="flex justify-center">
          <button class="save-button" @click="handleMaterialSave">保存设置</button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="selectTemplateDialog" width="1000" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col pb-4">
        <NavBar @handleClose="handleClose" title="请选择模版" />
        <div class="flex flex-col px-6 pt-4 gap-10 h-[600px] overflow-y-auto">
          <div
            class="flex flex-col gap-4 p-6"
            v-for="(item, index) in templateList"
            :key="index"
            @click="handleSelectTemplate(item.id, item.name)"
            :style="{ border: adjustInfo[selectTemplateKey!] == item.id ? '1px solid #FF9600' : '' }">
            <el-divider>
              <span class="text-xl">{{ item.name }} </span>
            </el-divider>
            <span class="text-[#888888] text-sm">说明{{ item.descr }}</span>
            <div class="flex flex-wrap gap-6">
              <el-image
                style="width: 100px; height: 100px"
                :src="imageItem.url"
                :initial-index="4"
                fit="cover"
                v-for="(imageItem, imageIndex) in item.images"
                :key="imageIndex" />
            </div>
          </div>
        </div>
        <div class="flex justify-center" @click="handleClose">
          <div class="save-button">确定</div>
        </div>
      </div>
    </el-dialog>
  </main>
</template>
<style lang="scss" scoped>
.save-button {
  @apply text-white px-16 py-3 rounded-md;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
::v-deep .el-dialog__header {
  padding-bottom: 0 !important;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
